<template>
  <view class="fans">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader :pageTitle="name"></singleHeader>
    <!-- #endif -->

    <view class="fansList">
      <view class="item" v-for="item of list" :key="item.id">
        <view class="img">
          <image :src="item.avatar" mode="aspectFill"></image>
        </view>

        <view class="name">{{ item.name }}</view>

        <view
          v-if="type === '1'"
          class="btn"
          @click="follow(item)"
          :class="[isFollow(item)[0]]"
        >
          <i class="iconfont icon-add-select" v-if="isFollow[0]"></i>
          {{ isFollow(item)[1] }}
        </view>
      </view>

      <view class="noMore">{{ $t("home.noMore") }}~</view>
    </view>

    <!-- 全局过渡组件 -->
    <transitionPage></transitionPage>
  </view>
</template>

<script>
import videoClassify from "@/api/videoClassify";
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";

export default {
  components: {
    singleHeader,
  },

  data() {
    return {
      page: 1,
      list: [],
      count: 0,
      isEnd: false,
      id: undefined,
      name: "",
      type: "",
    };
  },

  computed: {
    isFollow() {
      return (item) => {
        let _text = this.$t("videoGoods.list.follow"),
          _class = "";

        if (item.is_focus) {
          _text = this.$t("videoGoods.list.checkedFollow");
          _class = "on";
        }

        return [_class, _text];
      };
    },
  },

  onLoad({ name, id, type }) {
    this.$utils.hideShareMenu();

    this.name = decodeURIComponent(name);
    this.id = id;
    this.type = type;

    this.getDataList();
  },

  methods: {
    getDataList() {
      let { type } = this;
      if (type === "0") {
        this.videoGoodsFansList();
        return;
      }

      this.videoGoodsFocusList();
    },

    videoGoodsFocusList() {
      let { list: oldList, id: user_id, page, count } = this,
        limit = 20;

      videoClassify
        .videoGoodsFocusList({
          user_id,
          page,
          limit,
        })
        .then((res) => {
          if (res.code === 0) {
            let { list, row_count } = res.data;
            this.count = parseInt(row_count);

            list = list.map((el) => {
              return {
                ...el,
                is_focus: 1,
              };
            });

            if (list.length) {
              oldList.push(...list);
              this.page = page + 1;
            }

            if (oldList.length >= count) {
              this.isEnd = true;
            }
          }
        });
    },

    videoGoodsFansList() {
      let { list: oldList, id: user_id, page, count } = this,
        limit = 20;

      videoClassify
        .videoGoodsFansList({
          user_id,
          page,
          limit,
        })
        .then((res) => {
          if (res.code === 0) {
            let { list, row_count } = res.data;
            this.count = parseInt(row_count);

            list = list.map((el) => {
              return {
                ...el,
                is_focus: 1,
              };
            });

            if (list.length) {
              oldList.push(...list);
              this.page = page + 1;
            }

            if (oldList.length >= count) {
              this.isEnd = true;
            }
          }
        });
    },

    // 关注和取消关注
    follow(item) {
      let user_id = item.id,
        is_focus = item.is_focus;

      if (is_focus === 0) {
        videoClassify
          .videoGoodsFocus(
            {
              focus_user_id: user_id,
            },
            false
          )
          .then((res) => {
            if (res.code === 0) {
              this.$set(item, "is_focus", 1);
              this.$utils.toast(res.msg);
            }
          });
      } else {
        videoClassify
          .videoGoodsCancelFocus(
            {
              user_id,
            },
            false
          )
          .then((res) => {
            if (res.code === 0) {
              this.$set(item, "is_focus", 0);
              this.$utils.toast(res.msg);
            }
          });
      }
    },

    // 滚动到底部
    onReachBottom() {
      if (this.isEnd) {
        return;
      }
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.fansList {
  padding: 12rpx 30rpx;

  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .img {
    width: 78rpx;
    height: 78rpx;

    image {
      background: #d9d9d9;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
  }

  .name {
    flex: 1;
    margin: 0 16rpx;
    font-size: 32rpx;
    color: #262626;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 124rpx;
    height: 56rpx;
    border: 1px solid #f0f0f0;
    color: #8c8c8c;
    font-size: 24rpx;

    &.on {
      border-color: #f82641;
      background: #f82641;
      color: #fff;
    }
  }
}

.noMore {
  padding: 40rpx 0;
  font-size: 22rpx;
  text-align: center;
  color: #c1c1c1;
}
</style>
